<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="23"
    height="23"
    viewBox="0 0 23 23"
    fill="none"
  >
    <path
      d="M11.94 22.44C6.14001 22.44 1.44 17.74 1.44 11.94C1.44 6.14001 6.14001 1.44 11.94 1.44C17.74 1.44 22.44 6.14001 22.44 11.94C22.44 17.74 17.74 22.44 11.94 22.44ZM11.94 20.66C7.13005 20.66 3.22 16.75 3.22 11.94C3.22 7.13005 7.13005 3.22 11.94 3.22C16.75 3.22 20.66 7.13005 20.66 11.94C20.66 16.75 16.75 20.66 11.94 20.66Z"
      fill-rule="evenodd"
      :fill="active ? activeColor : inactiveColor"
      :style="style"
    ></path>
    <path
      d="M9.04 7.15C8.30995 7.79003 7.90997 8.65001 7.90997 9.58004L7.90997 9.74999L7.91642 9.80229C7.9375 9.88446 8.0083 9.93999 8.09995 9.93999L9.22 9.93999L9.27227 9.93355C9.3544 9.91251 9.40997 9.84164 9.40997 9.74999L9.40997 9.58004L9.41567 9.44556C9.49825 8.4686 10.4739 7.70003 11.66 7.70003C12.8999 7.70003 13.91 8.54004 13.91 9.58004C13.91 10.31 13.4 10.97 12.5999 11.28L12.4163 11.3577C11.9969 11.5543 11.6425 11.855 11.38 12.24C11.0699 12.69 10.91 13.22 10.91 13.76L10.91 14.27L10.9192 14.3272C10.9432 14.3988 11.012 14.45 11.0999 14.45L12.22 14.45L12.2781 14.4409C12.3524 14.4172 12.41 14.35 12.41 14.27L12.41 13.73L12.4183 13.5973C12.4403 13.42 12.506 13.244 12.61 13.1C12.74 12.91 12.92 12.77 13.13 12.68C14.5199 12.15 15.41 10.93 15.41 9.58004C15.41 8.65001 15.01 7.79003 14.2799 7.15C13.57 6.53999 12.65 6.20001 11.66 6.20001C10.6799 6.20001 9.74995 6.53999 9.04 7.15ZM11 16.23C10.82 16.4 10.72 16.64 10.72 16.89C10.72 17.14 10.82 17.38 11 17.56C11.17 17.73 11.41 17.83 11.66 17.83C11.91 17.83 12.15 17.73 12.32 17.56C12.5 17.38 12.6 17.14 12.6 16.89C12.6 16.64 12.5 16.4 12.32 16.23C12.15 16.05 11.91 15.95 11.66 15.95C11.41 15.95 11.17 16.05 11 16.23Z"
      fill-rule="evenodd"
      :fill="active ? activeColor : inactiveColor"
      :style="style"
    ></path>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'operation-data-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
